import { View } from "@tarojs/components";
import React, { useEffect, useState } from "react";

const TypeSwitch: React.FC<{
    value?: string | number,
    list: { name: string, value: string | number }[],
    onChange: (val: string) => void
}> = ({ list, onChange, value }) => {

    const [showType, setShowType] = useState<string | number>()

    useEffect(() => {
        setShowType(value === undefined ? list[0].value : value)
    }, [value])

    const switchShowType = (val) => {
        setShowType(val)
        onChange(val)
    }

    return (
        <View className="type-switch flex-row flex-item text-main-color">
            {
                list.map(item => {
                    return (
                        <View onClick={() => switchShowType(item.value)} className={`type-item ${showType === item.value ? 'active' : ''}`}>
                            <View className="type-name">{item.name}</View>
                            <View className="bottom-line bg-contrast-color"></View>
                        </View>
                    )
                })
            }
        </View>
    )

}

export default TypeSwitch